{% extends "base.html" %}
{% load thumbnail %}

{% block title %}
    {{ user.get_full_name }}
{% endblock %}

{% block content %}
    <h1>{{ user.get_full_name }}</h1>
    <div class="profile-info">
        {% thumbnail user.profile.photo "180x180" crop="100%" as im %}
            <img src="{{ im.url }}">
        {% endthumbnail %}
    </div>
    {% with total_followers=user.followers.count %}
        <span class="count">
        <span class="total">{{ total_followers }}</span>
        人关注
        </span>
        <a href="#" data-id="{{ user.id }}"
           data-action="{% if request.user in user.followers.all %}un{% endif %}follow"
           class="follow button">
            {% if request.user not in user.followers.all %}
                关注
            {% else %}
                取消关注
            {% endif %}
        </a>
        <div id="image-list" class="image-container">
            {% include "images/image/list_ajax.html" with images=user.images_create.all %}
        </div>
    {% endwith %}
{% endblock %}

{% block domready %}
        $('a.follow').click(function (e) {
            e.preventDefault();
            $.post('{% url "user_follow" %}',
                {
                    id: $(this).data('id'),
                    action: $(this).data('action')
                },
                function (data) {
                    if (data['status'] == 'ok') {
                        var previous_action = $('a.follow').data('action');
                        // 切换数据操作
                        $('a.follow').data('action', previous_action == 'follow' ? 'unfollow' : 'follow');
                        // 切换文本
                        $('a.follow').text(previous_action == 'follow' ? '取消关注' : '关注');
                        // 更新关注
                        var previous_followers = parseInt($('span.count .total').text());
                        $('span.count .total').text(previous_action == 'follow' ? previous_followers + 1 : previous_followers - 1);
                    }

                });
        });
{% endblock %}